<!DOCTYPE html>
<html>
<head>
    <title>simple-chat-springboot</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- element ui -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        .bottom {
            display: flex;
            align-items: center;
            padding: 10px;
        }

        .bottom > * {
            padding: 0 10px;
        }
    </style>

</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="content"
                label="内容">
        </el-table-column>
        <el-table-column
                prop="from"
                label="发送人"
                width="180">
        </el-table-column>
    </el-table>
    <div class="bottom">
        <el-tag type="info" v-if="!from">type your name</el-tag>
        <el-tag v-else>{{ from }}</el-tag>
        <el-input v-model="input" placeholder="请输入内容" @keyup.enter.native="submit"></el-input>
        <el-button v-if="!from" type="success" icon="el-icon-check" circle @click="submit"></el-button>
        <el-button v-else type="primary" icon="el-icon-edit" circle @click="submit"></el-button>
    </div>
</div>


<!-- Websockets -->
<script src="https://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>


<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- Websocket handling -->
<script src="ws.js"></script>
</body>
</html>
